<template>
  <zm-view ref="view" background="#fff" @scroll="onScroll" @load-paging="handleLoadWinLog" @refresh-paging="handleRefreshWinLog">
    <zm-empty :show="list.length == 0 && !loading" text="暂无消息～" :icon="useImage('/zuimei-film-oss/1.0.0/empty/zwxx-empty.png')"></zm-empty>
    <u-swipe-action>
      <u-swipe-action-item v-for="(item, i) in list" :key="item.messageId" :index="i" :name="i" :disabled="isDisabledSwipeAction" :options="options" @click="onActionClick">
        <view class="item-wrap" @touchstart="onTouchStart($event, i)" @touchend="onTouchEnd" @mousedown="onTouchStart" @mouseup="onTouchEnd">
          <u-image :src="useImage(`/zuimei-film-oss/1.0.0/icons/person-msg-${item.type}.png`)" width="90rpx" height="90rpx" radius="50%"></u-image>
          <view class="right">
            <view class="flex flex-1 items-center justify-between">
              <text class="font-32 font-700">{{ item.messageType }}</text>
              <text class="text-999 whitespace-nowrap">{{ item.createTime | formatMsgDate }}</text>
            </view>
            <text class="flex text-666 font-26 mt-14 break-word">{{ item.content }}</text>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>

    <zm-transition :show="showDeleteButton" mode="fade-zoom" z-index="20" :custom-style="deleteButtonStyle">
      <view class="delete-button" @click="handleButtonDelete">
        <zm-icon-text name="delete-o" text="删除" size="28rpx" text-size="28rpx"></zm-icon-text>
      </view>
    </zm-transition>
    <zm-loading :show="loading && init" text="消息加载中~" custom-class="my-40"></zm-loading>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
export default {
  filters: {
    formatMsgDate(val) {
      const currentDate = uni.$dayJs()
      const contrastDate = uni.$dayJs(val)
      if (contrastDate.isSame(currentDate, "day")) {
        return uni.$dayJs(val).format("HH:mm")
      } else if (currentDate.year() === contrastDate.year()) {
        return uni.$dayJs(val).format("MM-DD HH:mm")
      } else {
        return uni.$dayJs(val).format("YYYY-MM-DD HH:mm")
      }
    }
  },
  mixins: [page],
  data() {
    return {
      init: false,
      list: [],
      index: -1,
      timer: null,
      scrollTop: 0,
      loading: false,
      deleteButtonX: 0,
      deleteButtonY: 0,
      showDeleteButton: false,
      isDisabledSwipeAction: false,
      options: [{ text: "删除", style: { backgroundColor: "#fe3602", fontSize: "28rpx" } }]
    }
  },
  onLoad() {
    if (uni.$platform != "ios") this.isDisabledSwipeAction = true
  },
  computed: {
    deleteButtonStyle() {
      return {
        top: `${this.deleteButtonY + this.scrollTop}px`,
        left: `${this.deleteButtonX}px`,
        position: "absolute"
      }
    }
  },
  methods: {
    // 点击滑动删除按钮
    onActionClick({ name }) {
      this.handleDeleteMsg({ messageId: this.list[name].messageId, index: name })
    },
    // 点击弹出删除按钮
    handleButtonDelete() {
      this.handleDeleteMsg({ messageId: this.list[this.index].messageId, index: this.index })
    },
    async handleDeleteMsg({ messageId, index }) {
      await uni.$confirm({ content: "是否确定删除该条消息？" })
      this.showDeleteButton = false
      uni.$api.message.delSystemMsg({ messageId }).then(() => {
        uni.$toast("删除成功")
        this.list.splice(index, 1)
        this.$refs.view.refreshPaging()
      })
    },
    async handleLoadWinLog(paging, next) {
      if (this.init == false) uni.$loading(true)
      this.loading = true
      uni.$api.message
        .getSystemMsg(paging, { loading: false })
        .then((res) => {
          this.init = true
          this.loading = false
          this.list = [...this.list, ...res.list]
          uni.$loading(false)
          next({ list: this.list, total: res.count })
        })
        .catch(() => {
          this.init = true
          uni.$loading(false)
        })
    },
    async handleRefreshWinLog(paging, next) {
      if (this.init == false) uni.$loading(true)
      this.loading = true
      uni.$api.message
        .getSystemMsg(paging, { loading: false })
        .then((res) => {
          this.init = true
          this.list = res.list
          this.loading = false
          uni.$loading(false)
          next({ list: this.list, total: res.count })
        })
        .catch(() => {
          this.init = true
          uni.$loading(false)
        })
    },
    onScroll(e) {
      this.scrollTop = e
    },
    onTouchStart(event, index) {
      if (uni.$platform == "ios") return
      this.showDeleteButton = false
      this.timer = setTimeout(() => {
        if (event.type == "touchstart") {
          this.deleteButtonY = event.touches[0].clientY
          this.deleteButtonX = event.touches[0].clientX
        }
        if (event.type == "mousedown") {
          this.deleteButtonY = event.clientY
          this.deleteButtonX = event.clientX
        }
        this.index = index
        this.showDeleteButton = true
      }, 800)
    },
    onTouchEnd() {
      clearTimeout(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .u-swipe-action {
  .u-swipe-action-item__right__button__wrapper {
    color: #fff;
    background-color: #fe3602 !important;
    &__text {
      font-size: 28rpx !important;
    }
  }
}
.delete-button {
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.item-wrap {
  display: flex;
  padding: 24rpx;
  padding-bottom: 0;

  .right {
    margin-left: 24rpx;
    width: calc(100% - 138rpx);
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #eee;
  }
}
</style>
